<template>
  <view :data-theme="globPrimary">
    <u-navbar :border-bottom="false" :custom-back="onBack">
      <view class="search-wrap">
        <u-search
          v-model="teacherTitle"
          :show-action="false"
          height="72"
          placeholder="输入讲师名字"
          @search="search"
        ></u-search>
      </view>
    </u-navbar>
    <dropdown @change="handleChange" :leveList="teacherLeveList" :list="categoryList"></dropdown>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="downCallback"
      @up="getTeacherList"
    >
      <view class="teacher-list u-flex">
        <view
          class="teacher-item"
          v-for="(item, index) in teacherList"
          :key="index"
          @click="toLink('pageFound/user/index', item.user_id)"
        >
          <edu-image width="330" height="440" :borderRadius="8" :src="item.avatar_url"></edu-image>
          <view class="desc u-flex">
            <view class="title u-line-1">{{ item.title }}</view>
            <u-image width="57" height="32" :src="item.icon_url" v-if="item.icon_url"></u-image>
          </view>
          <view class="content u-line-2">
            {{ item.signature }}
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import dropdown from './components/dropdown.vue'
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    dropdown,
  },
  data() {
    return {
      categoryId: 0,
      teacherList: [], // 讲师列表
      teacherLeveList: [], // 讲师等级列表
      categoryList: [], // 分类列表
      organId: 0, //机构id
      teacherTitle: '', // 搜索讲师的名称
      params: {}, // 参数
    }
  },
  onLoad(option) {
    if (option.hasOwnProperty('id')) {
      this.organId = option.id
    }
    this.getCategoryList()
    this.getTeacherLeveList()
  },
  // 监听页面返回
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    mescrollHeight() {
      const windowHeight = this.$u.sys().windowHeight
      let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight - 41
      return `${height}px`
    },
  },
  methods: {
    // 获取分类列表
    getCategoryList() {
      this.$edu.api
        .getCategory({
          type: 1,
          mhm_id: this.organId,
        })
        .then((res) => {
          const { data } = res
          this.categoryList = data
        })
    },
    // 获取讲师全部等级列表
    getTeacherLeveList() {
      this.$edu.api
        .getUserTeacherLeveList({
          mhm_id: this.organId,
        })
        .then((res) => {
          const { data } = res
          this.teacherLeveList = data
        })
    },
    // 获取讲师列表
    getTeacherList(page) {
      this.$edu.api
        .getUserTeacherList({
          ...this.params,
          mhm_id: this.organId,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res

          if (page.num == 1) this.teacherList = []
          this.teacherList = this.teacherList.concat(data.data)
          this.mescroll.endSuccess(data.data.length)
        })
    },
    // 搜索
    search() {
      this.handleChange(this.params)
    },
    // 筛选初始化分页数据
    handleChange(e) {
      this.params = {
        ...e,
        title: this.teacherTitle,
      }
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    },
    // 跳转
    toLink(url, id) {
      this.$edu.route(url, {
        id: id,
      })
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/index/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>
<style>
page {
  background-color: white;
}
</style>
<style lang="scss" scoped>
.search-wrap {
  flex: 1;
  margin-right: 30rpx;
}

.teacher-list {
  flex-wrap: wrap;
  padding: 0 30rpx;
}

.teacher-item {
  width: calc(50% - 16rpx);
  margin-right: 30rpx;
  margin-top: 30rpx;
  &:nth-child(2n) {
    margin-right: 0;
  }
  .desc {
    margin-top: 20rpx;
  }
  .title {
    max-width: calc(100% - 70rpx);
    font-size: 30rpx;
    color: $edu-main-color;
    font-weight: bold;
    margin-right: 4rpx;
  }
  .content {
    margin-top: 16rpx;
    height: 64rpx;
    line-height: 32rpx;
    font-size: 22rpx;
    color: $edu-tips-color;
  }
}
</style>
